<template>
  <div class="status-div">
    <el-row>
      <el-col :span="3"> 
        <div class="d-flex">
          Status: 
          <div class="circle l-margin" :class="statusObj.RAStatus ? 'online': 'offline'"></div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="d-flex">
          X: <div class="l-margin">{{ statusObj.RAPositionX }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="d-flex">
          Y: <div class="l-margin">{{ statusObj.RAPositionY }}</div>
        </div>
      </el-col>
      <el-col :span="3">
        <div class="d-flex">
          Z: <div class="l-margin">{{ statusObj.RAPositionZ }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="d-flex">
          Rx: <div class="l-margin">{{ statusObj.RARotationX }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="d-flex">
          Ry: <div class="l-margin">{{ statusObj.RARotationY }}</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="d-flex">
          Rz: <div class="l-margin">{{ statusObj.RARotationZ }}</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed, watch, onBeforeMount, onMounted, onBeforeUnmount } from 'vue'
import { useWsStore } from '@/stores/ws-module'
import { useRobotStore } from '@/stores/robot-module'
import { initRoboArm } from '@/api/wsObj'

const robotStore = useRobotStore()
const wsStore = useWsStore()
const robotWsObj = computed(() => wsStore['roboArm'])
const statusObj = ref({
  RAStatus: true,
  RAPositionX: 0,
  RAPositionY: 0,
  RAPositionZ: 0,
  RARotationX: 0,
  RARotationY: 0,
  RARotationZ: 0
})
let wsObj = null

const initData = () => {
  statusObj.value = robotWsObj.value
  robotStore.pushData(statusObj.value.RAPositionX, statusObj.value.RAPositionY, statusObj.value.RAPositionZ)
}
watch(robotWsObj, () => {
  initData()
})
onBeforeMount(() => {
  wsObj = initRoboArm()
})
onMounted(() => {
  initData()
})
onBeforeUnmount(() => {
  wsObj?.disconnect()
})
</script>

<style lang="scss" scoped>
.l-margin {
  margin-left: 10px;
}
</style>